<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="common-layout">
                    <el-container>
                        <el-button class="delete">删除</el-button>
                        <el-button type="success" @click="dialogFormVisible = true">新增</el-button>
                    </el-container>
                </div>
            </el-header>
            <el-main>
                <div class="common-layout">
                    <el-container style="display: block;">
                        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
                            :header-cell-style="{ background: '#EFF0FD', color: '#606266' }">
                            <el-table-column type="selection" width="55" />
                            <el-table-column label="公告标题" width="140" show-overflow-tooltip>
                                <template #default="scope">{{ scope.row.title }}</template>
                            </el-table-column>
                            <!-- <el-table-column property="b_time" label="展示日期" width="180" /> -->
                            <!-- <el-table-column property="pow" label="推荐权值" show-overflow-tooltip /> -->
                            <el-table-column property="member" label="创建成员" show-overflow-tooltip />
                            <el-table-column property="b_time" label="创建时间" show-overflow-tooltip />
                            <el-table-column label="操作" show-overflow-tooltip>
                                <template #default="a">
                                    <!-- <el-button link type="success" size="small" @click="handleClick(a.row)">
                                        编辑
                                    </el-button> -->
                                    <el-button link type="primary" size="small" @click="del(a.row)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="cxlist.currentPage" v-model:page-size="cxlist.pageSize"
                        :page-sizes="[2, 3, 4, 5]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="cxlist.count"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
                    </el-container>
                </div>
            </el-main>

            <!-- 弹出框 -->
            <el-dialog v-model="dialogFormVisible" title="添加公告">
                <el-form :model="form">
                    <el-form-item label="公告标题"  :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off" placeholder="请输入公告标题" />
                    </el-form-item>
                    <el-form-item label="公告类型" :label-width="formLabelWidth">
                        <el-select v-model="form.type" placeholder="公告类型">
                            <el-option label="上新公告" value="0" />
                            <el-option label="澄清公告" value="1" />
                            <el-option label="平台公告" value="2" />
                            <el-option label="活动公告" value="3" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="公告内容"  :label-width="formLabelWidth" >
                        <QuillEditor theme="snow" v-model="form.region" style="height:300px; width:388px"/>
                    </el-form-item>
                    <el-form-item label="展示日期" addlist.date :label-width="formLabelWidth">
                        <el-form-item>
                            <el-col :span="20">
                                <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date"
                                    style="width: 100%" />
                            </el-col>
                        </el-form-item>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="add">
                            添加
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </el-container>





    </div>


</template>
    
<script>
import { ElTable } from 'element-plus'
import { reactive, ref } from 'vue'


export default {
    name: 'VueWithdrawal',

    data() {
        return {
            tableData: [],
            cxlist: { currentPage: 1, pageSize: 2, count: 0 },
            dialogTableVisible: false,
            dialogFormVisible: false,
            formLabelWidth: '140px',
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: '',
                resource: '',
                desc: '',
            },
            gridData: [
                {
                    date: '2016-05-02',
                    name: 'John Smith',
                    address: 'No.1518,  Jinshajiang Road, Putuo District',
                },
                {
                    date: '2016-05-04',
                    name: 'John Smith',
                    address: 'No.1518,  Jinshajiang Road, Putuo District',
                },
                {
                    date: '2016-05-01',
                    name: 'John Smith',
                    address: 'No.1518,  Jinshajiang Road, Putuo District',
                },
                {
                    date: '2016-05-03',
                    name: 'John Smith',
                    address: 'No.1518,  Jinshajiang Road, Putuo District',
                },
            ]

        };
    },

    mounted() {
    this.cx();
    },

    methods: {
        handleSizeChange() {
            this.cx();
        },
        handleCurrentChange() {
            this.cx();
        },
        add() {
            this.form.date1=this.form.date1.getTime();
            var url='http://localhost:8083/BoticeServlet/add';
            this.$http.post(url,this.form)
            .then((result) => {

            }).catch((err) => {

            });
            this.dialogFormVisible=false;
        },
        cx(){
            var url='http://localhost:8083/BoticeServlet/queryAll';
            this.$http.post(url,this.cxlist)
            .then((result) => {
                this.tableData=result.data.records;
                this.cxlist.count = result.data.count;
                this.cxlist.pageSize = result.data.pageSize;
                console.log(this.tableData);
                for(var i=0;i<this.tableData.length;i++){
                    this.tableData[i].b_time=new Date(this.tableData[i].b_time).toJSON().replace(/T|Z|(\.\D{3})/g," ").trim()
                    this.tableData[i].member='admin';
                }
            }).catch((err) => {

            });
        },
        del(a){
// console.log(a.id);
         this.$http.get('/BoticeServlet/del?id='+a.id)
         .then((result) => {
            this.cx();
         }).catch((err) => {

         });
        },

    },
    components: {
    },
    

};
</script>
                            
<style lang="css" scoped>
.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}



.el-dialog{
    width: 100%;
    background-color: red;
}
.ql-toolbar{
    width: 500px !important;
}



.el-main {
    padding: 0 !important;
}

.bar {
    height: 60px;
    line-height: 60px;
}

.el-header {
    height: 50px;
    padding-left: 0;

}


.el-aside {
    overflow: hidden;
}

.el-form-item {
    margin-right: 10px;
}

.flex {
    margin-top: 20px;
}

/* 下方数据 */
.bottom-header {
    height: 370px;

}

.el-table {
    margin-top: 20px;
    box-shadow: 0 0 5px rgb(195, 206, 217);
}

.bottom-bar {
    border-top: 1px solid silver;
    height: 100%;
}

.el-pagination {
    float: left;
    margin-top: 10px;
}

.bottom-bar>span {
    margin-top: 16px;
    display: inline-block;

}

.delete {
    height: 33px;
    width: 60px;
    border: none;
    color: #fff;
    border-radius: 5px;
    background-color: red;
    cursor: pointer;
}

.delete:hover {
    background-color: rgb(242, 85, 85);
}
</style>